<template>
  <nav id="navbar" :class="['fixed w-full z-50 transition-all duration-300 py-5', scrolled ? 'bg-gray-50/95 backdrop-blur-sm' : 'bg-transparent']">
    <div class="container mx-auto px-6 md:px-12">
      <div class="flex justify-between items-center">
        <div class="logo-container">
          <router-link to="/">
            <img src="/同风起.png" alt="同风起科技" class="h-12 w-auto">
          </router-link>
        </div>
        <div class="hidden md:flex items-center space-x-12">
          <router-link
            v-for="link in mainLinks"
            :key="link.to"
            :to="link.to"
            class="nav-link text-gray-800 hover:text-primary font-medium text-base transition-colors duration-200 relative"
          >
            {{ link.text }}
          </router-link>
          <router-link
            to="/careers"
            class="px-6 py-2 text-sm font-medium bg-gray-100 hover:bg-gray-200 text-gray-900 rounded-full transition-colors duration-200"
          >
            加入我们
          </router-link>
        </div>
        <div class="md:hidden">
          <button @click="toggleMobileMenu" class="focus:outline-none p-2">
            <i class="fa fa-bars text-xl text-gray-800"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 移动端菜单 -->
    <div v-show="mobileMenuOpen" class="md:hidden bg-white border-t border-gray-100 shadow-lg animate-in slide-in-from-top">
      <div class="container mx-auto px-6 py-4 space-y-4">
        <router-link
          v-for="link in mainLinks"
          :key="link.to"
          :to="link.to"
          class="block py-3 px-4 text-gray-800 hover:text-primary font-medium text-base rounded-lg transition-all"
          @click="closeMobileMenu"
        >
          {{ link.text }}
        </router-link>
        <router-link
          to="/careers"
          class="block py-3 px-4 text-center font-medium bg-primary text-white rounded-lg shadow-sm hover:bg-primary/90 transition-colors"
          @click="closeMobileMenu"
        >
          加入我们
        </router-link>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'Navbar',
  data() {
    return {
      scrolled: false,
      mobileMenuOpen: false,
      mainLinks: [
        { to: '/', text: '首页' },
        { to: '#about', text: '关于我们' },
        { to: '#services', text: '业务服务' },
        { to: '#cases', text: '案例展示' },
        { to: '#contact', text: '联系我们' }
      ]
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      this.scrolled = window.scrollY > 0
    },
    toggleMobileMenu() {
      this.mobileMenuOpen = !this.mobileMenuOpen
    },
    closeMobileMenu() {
      this.mobileMenuOpen = false
    }
  }
}
</script>

<style scoped>
#navbar {
  transition: padding 0.3s ease, background-color 0.3s ease;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
}

.animate-in {
  animation: slideIn 0.3s ease-out forwards;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#navbar.scrolled {
  padding: 1rem 0;
}
</style>